<script lang="ts" setup name="printList">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import PrintDialog from "@/views/operation/printList/components/PrintDialog.vue";

const PrintDialogRef = ref<InstanceType<typeof PrintDialog>>();
const router = useRouter();
interface TableList {
  copies: number;
  id: number;
  key: string;
  name: string;
  sn: string;
  storeId: number;
  templateId: number;
}
const columns = reactive<ColumnProps[]>([
  {
    type: "index",
    label: "序号",
    width: 80
  },
  {
    label: "打印机名称",
    prop: "name"
  },
  {
    label: "序列号（SN）",
    prop: "name"
  },
  {
    label: "打印机KEY",
    prop: "key"
  },
  {
    label: "打印类型",
    prop: "templateId",
    enum: [
      { label: "结账单", value: 1 },
      { label: "厨房单", value: 2 }
    ],
    width: 150
  },
  {
    label: "打印机张数",
    prop: "copies",
    width: 150
  },
  {
    label: "操作",
    prop: "operation",
    width: 180
  }
]);
const tableList = ref<TableList[]>([
  { copies: 2, id: 607041739128901, key: "5cnrb5", name: "333", sn: "570030000371", storeId: 0, templateId: 2 },
  { copies: 1, id: 607041739128901, key: "5enrb5", name: "454", sn: "5705570000371", storeId: 2, templateId: 1 },
  { copies: 7, id: 607041739128901, key: "5pkrb5", name: "258", sn: "57025250052371", storeId: 3, templateId: 2 },
  { copies: 22, id: 607041739128901, key: "5rtrb5", name: "452", sn: "570005757371", storeId: 4, templateId: 2 },
  { copies: 33, id: 607041739128901, key: "6asrb5", name: "025", sn: "57005245200371", storeId: 5, templateId: 1 },
  { copies: 17, id: 607041739128901, key: "9vrrb5", name: "785", sn: "57003052450371", storeId: 6, templateId: 2 }
]);

const onDel = async (id: number) => {
  console.log(id);
  return;
  // await delPrintInfoAPI({ id });
};

const openDialog = (id?: number) => {
  PrintDialogRef.value?.acceptParams({
    dialogVisible: true,
    id
  });
};
</script>

<template>
  <div class="print-container">
    <div class="table-box">
      <ProTable :columns="columns" :data="tableList">
        <template #tableHeader>
          <el-button type="primary" @click="openDialog">新增打印机</el-button>
        </template>
        <template #operation="{ row }">
          <div>
            <el-button type="primary" link>编辑</el-button>
            <el-button type="primary" link @click="onDel(row.id)">删除</el-button>
          </div>
        </template>
      </ProTable>
    </div>
    <PrintDialog ref="PrintDialogRef"></PrintDialog>
  </div>
</template>

<style lang="scss" scoped>
.print-container {
  height: 100%;
  overflow-y: auto;
  background-color: #ffffff;
}
</style>
